iT邦幫忙

第 12 屆 iThome 鐵人賽

0
Modern Web

JavaScript 從零開始系列 第 31

JavaScript 從零開始 - Day31- 認識 Event 事件

  • 分享至 

  • xImage
  •  

JavaScript Note

瀏覽器中有許多的事件,筆記常用的像是滑鼠點擊、移動事件、鍵盤輸入事件、冒泡事件...等,事件通常與函式搭配使用,在事件發生前函式不會被執行!

舉例:點擊按鈕的事件

<input type="button" class="btn" value="CLICK" />

使用 querySelctor 綁定 .btn,並給予一個點擊事件 onclick,上方有講到,事件通常會配搭函示使用,所以程式碼會變成:

var el = document.querySelctor(".btn");
el.onclick = function () {};

function 後面的括弧中,可以帶入參數,若是事件,會帶 event 或是 e,在參數的位置,告訴 function 這會是一個事件,這邊帶一個點擊後會執行 alert 。

var el = document.querySelector(".btn");
el.onclick = function (e) {
  alert("click");
};

codepen: https://codepen.io/hnzxewqw/pen/xxGgrbQ


以上顯示效果成功後,用 console.log(e); 來看一下除了 alert 顯示外,還有什麼資訊可以查看,

點擊後在 console.log 裡面會看到一個物件資料:

MouseEvent {isTrusted: true, screenX: 56, screenY: 572, clientX: 56, clientY: 37, …}

點開後會看到以下詳細的資訊,而這些資訊在不同的專案上,會是很有用的參考資料:

MouseEvent {isTrusted: true, screenX: 56, screenY: 572, clientX: 56, clientY: 37, …}
isTrusted: true
screenX: 56
screenY: 572
clientX: 56 //點擊 X 軸的位置
clientY: 37 //點擊 Y 軸的位置
ctrlKey: false // 按壓 ctrl 鍵,因為沒按,所以是 false
shiftKey: false// 按壓 shift 鍵,因為沒按,所以是 false
altKey: false// 按壓 alt 鍵,因為沒按,所以是 false
metaKey: false
button: 0
buttons: 0
relatedTarget: null
pageX: 56
pageY: 37
x: 56
y: 37
offsetX: 46
offsetY: 27
movementX: 0
movementY: 0
fromElement: null
toElement: input.btn
layerX: 56
layerY: 37
view: Window {parent: global, opener: null, top: global, length: 0, frames: Window, …}
detail: 1
sourceCapabilities: InputDeviceCapabilities {firesTouchEvents: false}
which: 1
type: "click" //類型: 點擊
target: input.btn
currentTarget: null
eventPhase: 0
bubbles: true
cancelable: true
defaultPrevented: false
composed: true
timeStamp: 25442.33000000008
srcElement: input.btn
returnValue: true
cancelBubble: false
path: (5) [input.btn, body, html, document, Window]
__proto__: MouseEvent

上一篇
JavaScript 從零開始 - Day30- createElement 與 for 迴圈的使用
下一篇
JavaScript 從零開始 - Day32- 事件監聽 addEventListener
系列文
JavaScript 從零開始40
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言